<!DOCTYPE html>
<html>
<head>
	<title>模态框的使用</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<!-- data-target="#myModal"是id的调用模式，使用它就不用写id了 -->
<!-- 	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		启动模态框
	</button> -->

	<!-- role="dialog"增强访问性 -->
<!-- 	<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModallable" aira-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModallable">
						Modal title
					</h4>
				</div>
				<div class="modal-body">
					content
				</div>
				<div class="modal-footer">
					<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
					<button class="btn btn-primary">Save</button> 		
				</div>
			</div>
		</div>
	</div> -->
<!-- ------------------------------------------------- -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
		启动大Modal
	</button>
	<!-- fade是有过渡效果的 -->
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aira-labelledby="myLargeModalLabel" aira-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				这是一个大的Modal
			</div>
		</div>
	</div>

	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
		启动小Modal
	</button>
	<!-- fade是有过渡效果的 -->
	<div class="modal bs-example-modal-sm" tabindex="-1" role="dialog" aira-labelledby="myLargeModalLabel" aira-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				这是一个小的Modal
			</div>
		</div>
	</div>

	<!-- data-backdrop="false"点击外部时模态框不消失 -->

	<!-- 获取当前内容添加到输入框中data-whatever="@mdo" -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open
	modal for @mdo
	</button>
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aira-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">New Massage</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="recipient-name" class="control-label">Recipient</label>
							<input type="text" class="form-control" id="recipient-name" name="">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Send</button>
				</div>

			</div>
		</div>
	</div>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- <script type="text/javascript">
	var omyModal=document.getElementById('myModal');
	$(omyModal).modal("show");
</script>	 -->

<script type="text/javascript">
	$("#exampleModal").on("show.bs.modal",function(event){
		var button = $(event.relatedTarget);
		var recipient = button.data("whatever");
		var modal = $(this);
		modal.find(".modal-title").text("New Meassage to"+recipient);
		modal.find(".modal-body input").val(recipient);
	})
</script>
</body>
</html>